import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";

<Tabs groupId="npm-install">
  <TabItem value="npm" label="npm">
    <CodeBlock language="bash">
      {[
        props.deps?.length ? `npm install ${props.deps.join(" ")}` : undefined,
        props.devDeps?.length
          ? `npm install -D ${props.devDeps.join(" ")}`
          : undefined,
      ]
        .filter(Boolean)
        .join("\n")}
    </CodeBlock>
  </TabItem>
  <TabItem value="yarn" label="yarn">
    <CodeBlock language="bash">
      {[
        props.deps?.length ? `yarn add ${props.deps.join(" ")}` : undefined,
        props.devDeps?.length
          ? `yarn add -D ${props.devDeps.join(" ")}`
          : undefined,
      ]
        .filter(Boolean)
        .join("\n")}
    </CodeBlock>
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
    <CodeBlock language="bash">
      {[
        props.deps?.length ? `pnpm install ${props.deps.join(" ")}` : undefined,
        props.devDeps?.length
          ? `pnpm install -D ${props.devDeps.join(" ")}`
          : undefined,
      ]
        .filter(Boolean)
        .join("\n")}
    </CodeBlock>
  </TabItem>
  <TabItem value="expo" label="Expo">
    <CodeBlock language="bash">
      {[
        props.deps?.length
          ? `npx expo install ${props.deps.join(" ")}`
          : undefined,
        props.devDeps?.length
          ? `npx expo install -D ${props.devDeps.join(" ")}`
          : undefined,
      ]
        .filter(Boolean)
        .join("\n")}
    </CodeBlock>
  </TabItem>
</Tabs>
